<template>
<div>


  <div class="wode">
    <!-- 我的头部导航 -->
      <div class="wodenav">
        <div class="left">
          <p class="wodeleft"><img src="img/shan-tu10.jpg" alt=""></p>
          <div class="woderight">
            <h3 @click="login()">登录</h3>
          <p class="woderight-p">同步你的打字习惯</p>
          </div>
          
        </div>
        <h4 class="left" @click="fun()">设置</h4>
      </div>

<!-- 插件，宫格 -->
<van-grid :column-num="2" class="van-grid1">
  <van-grid-item >
    <h3>今日字数&gt;</h3> 
    <b>--</b>
    <p>专属输入日报</p>
  </van-grid-item>

  <van-grid-item class="van2">
    <h3>我的汪豆&gt;</h3> 
    <b>--</b>
    <p>汪豆换好礼</p>
  </van-grid-item>
</van-grid>




<!-- 插件宫格2 -->
<h4 class="zichan">我的资产</h4>
<van-grid :column-num="4" class="van-grid2">
  <van-grid-item v-for="(v,i) in arr" :key="i" >
    <img :src="v.img" alt="">
    <p>{{v.con}}</p>
  </van-grid-item>
</van-grid>


<!-- 插件宫格3 -->
<h4 class="zichan">工具与服务</h4>
<van-grid :column-num="4" class="van-grid2">
  <van-grid-item v-for="(v) in arr1" :key="v.id" >
    <img :src="v.img" alt="">
    <p>{{v.con}}</p>
  </van-grid-item>
</van-grid>


    <!-- 底部垫子 -->
    <div class="wodebottom"></div>

  </div>


<!-- 不要把这个底部包进去，不然有padding -->
  <Bottomfu/>
</div>


</template>

<script>
import Bottomfu from "@/components/bottom/fu.vue"

export default {
  components:{
    Bottomfu
  },
  data(){
    return{
      arr:[
        {img:'img/wode-tu1.jpg',con:"我的皮肤"},
        {img:'img/wode-tu2.jpg',con:"我的表情"},
        {img:'img/wode-tu3.jpg',con:"我的词库"},
        {img:'img/wode-tu4.jpg',con:"我的字体"},
        {img:'img/wode-tu5.jpg',con:"借钱"},
        {img:'img/wode-tu6.jpg',con:"我的关注"},
        {img:'img/wode-tu7.jpg',con:"我的卡包"},
      ],
      arr1:[
        {id:1,img:'img/wode-tu8.jpg',con:"创建录音"},
        {id:2,img:'img/wode-tu9.jpg',con:"导入音频"},
        {id:3,img:'img/wode-tu10.jpg',con:"我的音频"},
        {id:4,img:'img/wode-tu11.jpg',con:"录音权益"},
        {id:5,img:'img/wode-tu12.jpg',con:"企业服务"},
      ]
    }
  },
  methods:{
      fun(){
        this.$router.push("/shezhi")
      },
      login(){
        this.$router.push("/login")
      }
    }
}
</script>
<style>
.wode{
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.12rem;
}
.wodenav{
  height: 0.8rem;

  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  position: sticky;
  top: 0;
  z-index: 12;
  }
.wodenav .wodeleft{
  float: left;
  border-radius: 50%;
  overflow: hidden;
}
.wodeleft img{
  width: 0.64rem;
  display: block;
}
.wodenav .woderight{
  float: right;
  margin-left: 0.1rem;
}
.woderight h3{
  margin-top: 0.05rem;
}
.woderight-p{
  font-size: 0.14rem;
  margin-top: 0.05rem;
}


/* 插件宫格1 */

.van-grid1{
  margin-top: 0.1rem;
  border: 0.01rem solid rgb(212, 211, 211);
  box-shadow: rgb(207, 206, 206) 0 0 0.1rem;
  border-radius: 0.1rem;
  overflow: hidden;
}
 .van-hairline h3{
  color: orangered;
}
.van-hairline p{
  color: grey;
  font-size: 0.14rem;
  margin-top: 0.1rem;
}
.van2{
  border-left: 0.01rem solid rgb(240, 240, 240);
}
/* 插件2 */
.zichan{
  margin-top: 0.15rem;
}
.van-grid2{
  margin-top: 0.1rem;
}
.van-grid-item__content::after {
    z-index: 1;
    border-width: 0 ;
}
[class*=van-hairline]::after{
  border:none
}


.wodebottom{
  height: 0.5rem;
}
</style>